<template>
    <div class="goodsInfo_box">
        <!-- 小球 -->
        <transition @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter">
            <div class="ball" ref="ball" v-show="flag"></div>
        </transition>
       <!-- 轮播图部分 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <LBcomt :imglist='imglist'></LBcomt>
                </div>
            </div>
        </div>
       <!-- 选择数量部分 -->
       <div class="mui-card">
            <div class="mui-card-header">{{infolist.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{infolist.market_price}}</del>&nbsp;&nbsp;&nbsp;销售价：<span>￥{{infolist.sell_price}}</span>
                    </p>
                    <div class="count">
                        购买数量：<count :max='infolist.stock_quantity' @giveF = 'getF'></count>
                    </div>
                    <div class="btn">
                        <mt-button type='primary' size='small' class="buyNow">立即购买</mt-button>
                        <mt-button type='danger' size='small' @click="gocar">加入购物车</mt-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品参数部分 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{infolist.goods_no}}</p>
                    <p>库存情况：{{infolist.stock_quantity}}</p>
                    <p>上架时间：{{infolist.add_time | timeF}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type='primary' size='large' plain @click="goIntroduce">图文介绍</mt-button><br>
                <mt-button type='danger' size='large' plain @click="goodsComt">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import LBcomt from '../comment/lunboComt.vue'
import count from '../comment/count.vue'
export default {
    data(){
        return{
            imglist:[],
            infolist:{},
            id:this.$route.params.id,
            flag:false,
            count:1,
        }
    },
    created(){
        this.getImgList()
        this.getInfoList()
    },
    methods:{
        gocar(){
            this.flag = !this.flag
            var lists = {
                id:this.id,
                count:this.count,
                price:this.infolist.sell_price,
                selected:true
            }
            this.$store.commit('addtoCar',lists)
        },
        getImgList(){
            this.$http.get('api/getthumimages/'+ this.id).then(res=>{
                if (res.body.status == 0) {
                    this.imglist = res.body.message
                }
            })
        },
        getInfoList(){
            this.$http.get('api/goods/getinfo/'+ this.id).then(res=>{
                if (res.body.status == 0) {
                    this.infolist = res.body.message[0]
                }
            })
        },
        goIntroduce(){
            this.$router.push('/home/introduce' + this.id)
        },
        goodsComt(){
            this.$router.push('/home/goodsComt' + this.id)
        },
        getF(info) {
            console.log('你只行了我', info)
            this.count = info
        },
        beforeEnter(el){
            el.style.transform = "translate(0,0)"
        },
        Enter(el,done){
            el.offsetWidth
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const badgePosition = document
                .getElementById("badge")
                .getBoundingClientRect();

            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;
            el.style.transform = `translate(${xDist}px, ${yDist}px)`;
            el.style.transition = "all .6s cubic-bezier(.4,-0.3,1,.68)";
            done();
        },
        afterEnter (){
            this.flag = !this.flag
        }

    },
    components:{
        LBcomt,
        count
    }
}
</script>
<style lang="scss" scoped>
    .goodsInfo_box {
        overflow: hidden;
        .ball {
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 390px;
            left: 145px;
            z-index: 99;
        }
        .mui-card {
            margin: 10px;
            box-shadow: 0 0 8px #ccc;
            .price {
                color:#8f8f94;
                span {
                    color: red;
                    font-size:18px;
                    font-weight: bold;
                }
            }
            .buyNow {
                margin-right: 5px;
            }
            .mui-card-footer {
                display: block;
                button:nth-of-type(1) {
                    margin-top: 5px;
                }
            }
            .count {
                display: flex;
                line-height: 35px;
                margin-bottom: 10px;
            }
        }
    }
</style>
